<template>
  <div class="header">
    <el-menu
        router
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <div class="logo-box">
        <img class="logo-img" src="@/assets/logo.png" alt="">
      </div>
      <el-menu-item index="/"><i class="el-icon-aim"></i>代码生成</el-menu-item>
      <el-menu-item index="/datasource"><i class="el-icon-s-data"></i>数据源</el-menu-item>
      <el-menu-item index="/config"><i class="el-icon-s-tools"></i>默认配置</el-menu-item>
      <el-menu-item index="/log"><i class="el-icon-basketball"></i>操作日志</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'LayoutHeader',
  data() {
    return {};
  },
  methods: {}
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3000;
}

.el-menu-demo {
  display: flex;
}

.logo-box {
  width: 30%;
  margin: auto 0;
}

.logo-img {
  width: 105px;
  height: 36px;
}
</style>
